import  React from 'react';
import  { Layout, Menu } from "antd";
import HeaderList from './HeaderList';
import  { HashRouter, Route, Link,Switch } from 'react-router-dom';
import  {defaultMeauList,serverMeauList}  from '../routers';



const { Header, Content, Sider } = Layout;

const { SubMenu } = Menu;
/**
 * 通过名字查路由
 * @param {*} routerName 
 */
 const getLeftMenuByName=(routerName,routers)=>{
    return routers.filter(u=>u.title ===routerName)[0]["routers"];
}


/**
 * 路由对象转路由组件
 * @param {*} route 
 */
 function RouteByRouter(route) {
    return (
      <Route
        exact={route.exact}
        path={route.path}
        render={props => (
          <route.component {...props} routes={route.routes}/>
        )}
      />
    );
  }

  function getRouterMapping(router,rList){
    if(router.component){
        rList.push(router);
    }

    if(router.routers && router.routers.length>0){
        for (let j=0;j<router.routers.length;j++){
            let u=router.routers[j]
            getRouterMapping(u,rList)
        }
    }
}


/**
 * 一级路由
 * @param {*} routerName 
 */
 const generateContentComponent=(routers)=>{ 
    let routerMapping=[];
    routers.forEach(u=>{getRouterMapping(u,routerMapping);})

    let content= routerMapping.map((route, i) => {console.log(route,i); return (<RouteByRouter key={i} {...route} />)})
    class D  extends  React.Component{
      render() {
        return (
            <Switch>
                {content}
            </Switch>
        );
      }
    }
    return D;
  }
  

function renderLeftMenu(leftMenu){
     if(leftMenu===undefined){
       return <div></div>
     }
      return (  
        <Menu mode="inline">
            {leftMenu.map(
                route => {
    
                    if(route.routers){
                        return (
                            <SubMenu key={route.path} icon={route.icon}  title={route.title}>
                              {route.routers.map(subItem =>
                                subItem.hide ? null : (
                                  <Menu.Item key={subItem.path} icon={subItem.icon}  > 
                                    <Link to={subItem.path}>{subItem.title}</Link>
                                  </Menu.Item>
                                ),
                              )}
                            </SubMenu>
                          );  
                    }
                    return (
                        <Menu.Item key={route.path}  icon={route.icon}><Link to={route.path}>{route.title}</Link></Menu.Item>
                    )
            })}
        </Menu>
    )
}





 
  const mainComponent=(routerName,routers)=>{ 
    const ContentComponent=generateContentComponent(routers);
    class D extends React.Component {
        componentDidMount() {
      
        }
        render() {
            const leftMenu= getLeftMenuByName(routerName,routers)
            return (
                <div>
                    <Layout>
                        <Sider collapsible width={200} style={{ background: '#fff' }}>
                            {renderLeftMenu(leftMenu)}
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Content
                                style={{
                                    background: '#fff',
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 2000,
                                }}
                            >
                                <ContentComponent></ContentComponent>
                            </Content>
                        </Layout>
                    </Layout>
                </div>
            );
        }
    }
    return D;
  }


class Index extends React.Component {
    state={
      routers:defaultMeauList
    }

    componentDidMount(){
      
        serverMeauList().then(routers=>{
            this.setState({
              routers:routers
            })
        })
    }

    render() {
        return (
            <HashRouter>
                <Layout>
                    <Header className="header">
                       <HeaderList routers={this.state.routers}/>
                    </Header>
                    <Layout>
                         {this.state.routers.map((route, i) => { console.log("/"+route.path.split("/")[1],"route.path");  return(<Route key={i} path={"/"+route.path.split("/")[1]} component={ mainComponent(route.title,this.state.routers)} />)})}  
                    </Layout>
                </Layout>
            </HashRouter>
        );
    }
}



export default Index;